<template>
  <div class="index-header">
    
    <div class="container header-top" >
      <h1 class="header-top-left">Hi ! 欢迎来到嘉宝橱柜衣柜定制 ！</h1> 
      <ul class="header-top-right">
        <li>收藏嘉宝</li>
        <li>关注嘉宝</li>
        <li>售前咨询热线：400-0188-608</li>
        <li>售后电话：0731-88334455</li>
        <li>登录</li>
        <li>注册</li>
      </ul>
    </div>
    <div class="header-bottom">
      <div class="container">
        <img class="logo" src="@/assets/index/logo.png" alt="">
        <ul class="type">
          <li class="type-item">
             <router-link to = "/">全部商品</router-link>
          </li>
          <li class="type-item">
             <router-link to = "/">设计师</router-link>
          </li>
          <li class="type-item">
             <router-link to = "/">关于嘉宝</router-link>
          </li>
          <li class="type-item">
             <router-link to = "/">晒单分享</router-link>
          </li>
        </ul>
        <div class="search">
          <input type="text">
          <i class="el-icon-search"></i> 
        </div>  
      </div>
      
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'IndexHeader',
  data () {
    return {
      msg: 'index'
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
.index-header
  position relative  
.header-top
    height 30px
    
    line-height 30px
    .header-top-left
        float left
    .header-top-right
        float right
        overflow hidden
      .header-top-right>li
        float left
        padding 0 10px  
.header-bottom
  z-index 9999
  position absolute
  width 100%
  background rgba(0,0,0,0.6)
  height 80px
.header-bottom>.container
  position relative
  .logo
    float left
    margin-top 15px
  .type
    overflow hidden
    float left
    margin-left 250px
    .type-item
      float left
      color white
      
.type-item>a
  font-size 20px
  line-height 80px
  display block
  padding 0 25px
.search
  float right
  width 160px
  height 24px
  position relative
  margin-top 27px
.search>input
  width 100%
  height 100%
  border-radius 24px
  text-indent  12px
.search>i
  position absolute 
  right 4px
  top 5px
  
.container
  container()  
</style>
